<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item >宿舍小超市</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/index/buy/list' }">商品列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row class="margintop20">
            <el-col v-if="goodList">
                <el-tabs tab-position="left" style="height:100%" >
                    <el-tab-pane v-for="(item,i) in goodTypes" :key="i" :label="item.text" >
                        <Items 
                            :typeobj="item"
                            :goods="goodList"
                        > </Items>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {getgoodlist,getgoodtypelist} from  "@/api"
import Items from "./items.vue"
export default {
    components:{
        Items
    },
    data(){
        return {
            goodList:null,
            goodTypes:null
        }
    },
    methods:{
        getGoodList(){
            getgoodlist()
            .then(res=>{
                if(res.type){
                    this.goodList = res.result;
                }
            })
        },
        async getGoodTypes(){
            let res = await getgoodtypelist();
            if(res.type){
                this.goodTypes = res.result;
            }
            this.$nextTick(()=>{
                this.getGoodList()
            })
        }
    },
    mounted(){
        this.getGoodTypes();
    }
}
</script>